<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 30px; margin-top: 30px"
      @click="openDialog"
      >新增医生</el-button
    >
    <el-table
      ref="multipleTable"
      :data="DocterData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px; margin-bottom: 20px;margin-left: 30px;"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="医师照片" width="150">
        <template slot-scope="scope"
          ><img :src="scope.row.photoAddress" style="width: 70px; height: 70px"
        /></template>
      </el-table-column>
      <el-table-column label="医师姓名" width="130">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="医师科室" show-overflow-tooltip width="230">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column label="医师擅长领域" width="500">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="Updatedocter(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="DocterDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
      :small="true"
      background
      :total="20"
      :page-size="5"
      style="padding: 20px 0"
      layout="prev, pager, next"
      @current-change="handCurrentPage"
       @prev-click="handprevPage"
       @next-click="handNextPage"
    />
    </div>
    <el-dialog :title="diffTitle" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" :rules="rules" ref="userform">
        <el-form-item
          label="医师擅长内容"
          :label-width="formLabelWidth"
          size="small"
          prop="content"
        >
          <el-input v-model="formdata.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医师专业"
          :label-width="formLabelWidth"
          prop="department"
        >
          <el-input v-model="formdata.department" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="就职医院"
          :label-width="formLabelWidth"
          prop="hostal"
        >
          <el-input
            v-model="formdata.hostal"
            autocomplete="off"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="医师简介"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="formdata.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医师姓名"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="formdata.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医师电话"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="formdata.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-select v-model="formdata.gender" placeholder="请选择性别">
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="avatar">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="EditImg"
            style="margin-top: 10px"
            >选择图片</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDocter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 头像对话框 -->
    <el-dialog title="选择标签图片" :visible.sync="isShow" class="second-dig">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="Fake Action"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="handleHttpRequest"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >确定</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import {getRandom} from '@/utils/random'
export default {
  name: "Activity",
  data() {
    return {
      loading: true,
      isShow:false,
      formLabelWidth: "120px",
      flieData: null,
      fileList: [],
      docInfo: {
        current: 1,
        keyword: "",
        size: 5,
      },
      dialogFormVisible: false,
      formdata: {
        content: "",
        department: "",
        gender: "",
        hostal: "",
        id: null,
        introduce: "",
        isDel: 0,
        name: "",
        number: "", //医师编号uuid
        phone: "",
        photoAddress: "",
      },
      rules: {
        content: [
          { required: true, message: "请输入擅长内容", trigger: "change" },
        ],
        department: [
          { required: true, message: "请输入专业", trigger: "", type: "" },
        ],

        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        hostal: [
          { required: true, message: "请输入就职医院", trigger: "change" },
        ],
        introduce: [
          { required: true, message: "请输入医师简介", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入医师姓名", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "change",
          },]
        
      },

      DocterData: [],
      titleShow: false,
    };
  },
  mounted() {
    this.GetAllDocterInfo();
  },
  computed: {
    diffTitle() {
      if (this.titleShow == false) {
        return "修改医师";
      } else {
        return "新增医师";
      }
    },
  },
  methods: {
    //拿到首页所有医生信息
    async GetAllDocterInfo() {
      let res = await this.$store.dispatch(
        "doctorWithFriend/GetAllDocterinfo",
        this.docInfo
      );
      if (res == "ok") {
        this.loading = false;
        this.DocterData = this.$store.state.doctorWithFriend.doctordata;
      }
    },
    openDialog() {
      //打开对话框
      this.dialogFormVisible = true;
      this.titleShow = true;
    },
    //打开头像选择器
    EditImg() {
      this.isShow = true;
    },
    // 以下都为上传头像方法
    handleChange(file) {
      this.flieData = file;
    },
    async handleHttpRequest() {
      let formData = new FormData();
      formData.append("file", this.flieData.raw);
      let res = await this.$store.dispatch("user/LinUpdataFile", formData);
      // console.log(this.formdata);
      // console.log(res)
      if (res != '') {
        this.formdata.photoAddress = res;
      }
      that.$message({
        message: "已选择图片",
        type: "success",
        showClose: true,
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.isShow = false;
    },
    //更新医师
    Updatedocter(data){
      this.dialogFormVisible = true;
      this.titleShow = false;
      const newdata = this.formdata
      console.log(data)
      this.formdata = {...newdata,...data}
    },
    //新增医生按钮
    async addDocter() {
      this.loading = true
      // console.log(this.formdata)
      if (this.formdata.photoAddress == "") {
        this.$message({
          type: "error",
          message: "请先选择图片资源",
        });
        return;
      }
      if (this.titleShow == true) {
            if (this.Validate() !=false) {
          // const data = this.formdata;
          //  const {avator,content,name,pictureAdress,reateTime,id} = data
          this.formdata.number = getRandom();
          // console.log(this.formdata)
          // const newdata = this.formdata
          let res = await this.$store.dispatch(
            "doctorWithFriend/AddDocterInfo",
            this.formdata
          );
          if (res == "ok") {
            this.GetAllDocterInfo();
            this.dialogFormVisible = false;
            this.loading = false
            this.$message({
              type: "success",
              message: "医师新增成功",
            });
          }
            }
      } else {
        //修改
        if (this.Validate() != false) {
          this.formdata.path = getRandom();
          let res = await this.$store.dispatch(
            "doctorWithFriend/updateDocter",
            this.formdata
          );
          if (res == "ok") {
            this.GetAllDocterInfo();
            this.dialogFormVisible = false;
            this.loading = false
            this.$message({
              type: "success",
              message: "医师修改成功",
            });
          }
        }
      }
    },
    //表单验证
    Validate() {
      this.$refs.userform.validate((valid) => {
        if (!valid) {
          return false;
        } else return true;
      });
    },
    //删除医生
    async DocterDelete(id){
      this.$confirm("此操作将删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async ()=>{
        let res = await this.$store.dispatch('doctorWithFriend/DeleteOneDocter',id)
       if (res == "ok") {
            this.GetAllDocterInfo();
            this.$message({
              type: "success",
              message: "医师删除成功",
            });
          }
      })
       
    },
    //改变当前页
    handCurrentPage(val){
      this.docInfo.current = val
      this.GetAllDocterInfo(this.docInfo);
      
    },
    //上一页
    handprevPage(val){
      this.docInfo.current = val
      this.GetAllDocterInfo(this.docInfo);
      
    },
    //下一页
    handNextPage(val){
      this.docInfo.current = val
      this.GetAllDocterInfo(this.docInfo);
      
    }
  },
};
</script>

<style>
 .pagination {
      margin-top:2px;
      margin-left:30vw;
    }
</style>
